<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .tab-header-span {
        padding: 5px;
        margin: 5px;
        background: #eee;
        border-radius: 5px;
        cursor: pointer;
      }
      .active {
        background: lightcoral;
        color: white;
      }
      .btn {
        /* width: 25px;
        height: 25px; */
        margin: 5px;
        padding: 10px;
        display: inline-block;
        text-align: center;
        background: lightsalmon;
        border-radius: 5px;
        cursor: pointer;
        color: white;
      }
      .danger {
        background: red;
        border: 2px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <shop-cart :num="num" @add-item="addItem" @reduce-item="reduceItem" :cart-list="cartList"></shop-cart>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      // 组件封装思想：
      // ***** 逻辑往上走，数据往下流 *****
      //解释： 数据在父组件中，请求，然后，传递给子组件；子组件不处理逻辑，通知父组件处理逻辑

      Vue.component('shop-cart', {
        props: ['num', 'cartList'],
        methods: {
          handleAddItem(item) {
            // console.log(item, 'item')
            // 子父通信。告诉父组件，我是addItem
            this.$emit('add-item', item)
          },
          handleReduceItem(item) {
            // console.log(item, 're')
            // 子父通信。告诉父组件，我是reduceItem
            this.$emit('reduce-item', item)
          },
        },
        template: `
        <div class="shop-cart-wrapper">
         <h1>{{num}}</h1>
        <ul v-for="(item, index) in cartList">
          <li>{{item.cName}}</li>
          <li>
            <span class="btn" @click="handleAddItem(item)">+</span>
            <span class="btn">{{item.count}}</span>
            <span class="btn" @click="handleReduceItem(item)">-</span>
          </li>
        </ul>
      </div>
        `,
      })

      const vm = new Vue({
        el: '#app',
        data() {
          return {
            cartList: [],
          }
        },
        // 计算总价逻辑
        computed: {
          num() {
            return this.cartList.reduce((num, item) => {
              return num + item.count
            }, 0)
          },
        },
        methods: {
          addItem(item) {
            item.count++
            console.log('father: ', item)
          },
          reduceItem(item) {
            if (item.count <= 1) {
              if (window.confirm('确定删除吗?')) {
                // 如果要删除，找到下标 调用splice方法，删除
                let removeIndex = this.cartList.findIndex((v) => v.id === item.id)
                this.cartList.splice(removeIndex, 1)
              }
              return
            }
            item.count--
          },
        },
        async created() {
          const response = await axios.get('./data.json')
          this.cartList = response.data

          // const res = await axios.get('http://localhost:3000/shopCount', {
          //   params: {
          //     _page: 1,
          //     _limit: 2,
          //   },
          // })

          const res = await axios.delete('http://localhost:3000/shopCount/1')

          console.log(res, 'res')
        },
      })
    </script>
  </body>
</html>
